<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <br/>
    <h2>{{ math }}</h2>
    <br/>
    <Button type="primary" @click="copy(0)" :data-clipboard-text="math" class="tag-read0">复制并刷新</Button>
    <Button type="primary" @click="copy(1)" :data-clipboard-text="math" class="tag-read1">复制</BUTTON>
    <Button type="primary" @click="refresh">刷新</Button>
    <br/>
    <br/>
    <h3 style="color: crimson" v-if="show">{{ lastMath }}</h3>
  </div>
</template>
<script>
import Clipboard from 'clipboard'

export default {
  name: 'mucangParameter',
  data () {
    return {
      msg: '_t参数生成器',
      math: this.getRandomR(1),
      lastMath: '',
      show: false,
      sum: 0,
      timer: '',
    }
  },
  methods: {
    copy (flag) {
      let clipboard
      if (flag === 0) {
        clipboard = new Clipboard('.tag-read0')
      }
      if (flag === 1) {
        clipboard = new Clipboard('.tag-read1')
      }
      let showValue = this.math
      clipboard.on('success', e => {
        // 释放内存
        clipboard.destroy()
        this.show = true
        this.lastMath = '复制成功:' + showValue
        if (flag === 0) {
          this.math = this.getRandomR(1)
        }
      })
      this.timer = setTimeout(() => {   //设置延迟执行
        this.show = false
        this.lastMath = ''
      }, 3000)
      clipboard.on('error', e => {
        // 不支持复制
        // 释放内存
        clipboard.destroy()
      })

    },
    refresh () {
      this.math = this.getRandomR(1)
    },
    getRandomR (a) {
      a = 1
      var c = Math.abs(parseInt(new Date().getTime() * Math.random() * 10000)).toString()
      var d = 0
      var b
      var e
      var r = (f) => {
        return (g, h) => {
          return ((h - '' + g.length) < 0) ? g : (f[h] || (f[h] = Array(h + 1).join(0))) + g
        }
      }
      for (b = 0; b < c.length; b++) {
        d += parseInt(c[b])
      }
      e = r([])
      d += c.length
      d = e(d, 3 - d.toString().length)
      return a.toString() + c + d
    }
  },
  mounted () {

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

a {
  color: #42b983;
}

.hello {
}

.tag-read0 {
}

.tag-read1 {
}

</style>
